import React from 'react';
import { Form, InputNumber, Input } from 'antd';

const FormItem = Form.Item;

export const EditableContext = React.createContext();

const { Provider, Consumer } = EditableContext;

const EditableRow = ({ form, index, ...props }) => (
	<Provider value={form}>
		<tr {...props} />
	</Provider>
);

export class EditableCell extends React.PureComponent {
	constructor() {
		super();
		this.state = {};
	}
	render() {
		const { editing, dataindex, title, record, index, ...rest } = this.props;
		return (
			<Consumer>
				{form => {
					const { getFieldDecorator } = form;
					return (
						<td {...rest}>
							{editing === 'true' ? (
								<FormItem style={{ margin: 0 }}>
									{getFieldDecorator(dataindex, {
										initialValue: record[dataindex],
									})(
										typeof record[dataindex] === 'string' ? (
											<Input />
										) : (
											<InputNumber />
										)
									)}
								</FormItem>
							) : (
								rest.children
							)}
						</td>
					);
				}}
			</Consumer>
		);
	}
}

export const EditableFormRow = Form.create()(EditableRow);
